<template>
	<div class="alarmConfiguration zy-content">
		<search :columns="searchData" @getSearch="getSearch(arguments)"></search>
		<div class="list-layout btn—box mt16">
			<div class="cycle">
				<div
					:class="['normal', activeIndex == index ? 'active' : '']"
					v-for="(item, index) in mainType"
					:key="index"
					@click="stateClick(item, index)"
				>
					{{ item.name }}
				</div>
			</div>
			<div class="btn-line cycle mt16" v-if="activeIndex == 1">
				<div
					:class="['normal', progressIndex == index ? 'active' : '']"
					v-for="(item, index) in productiveProcessList"
					:key="index"
					@click="progressClick(item, index)"
				>
					{{ item.productionProcesses + item.productionProcessesNum }}
				</div>
			</div>
		</div>
		<Tabs class="tabs-layout mt16" v-model="tableName">
			<TabPane v-for="(item, index) in tabPaneList[activeIndex]" :key="index" :label="item.name" :name="index"></TabPane>
		</Tabs>
		<MyTable
			ref="MyTable"
			:postUrl="tabPaneList[activeIndex][tableName].url"
			:columns.sync="tabPaneList[activeIndex][tableName].columns"
			:searchParams="searchParams"
			:params="params"
		></MyTable>
		<!-- :params="params" -->
	</div>
</template>

<script>
import search from '@/components/curd/searchList.vue';
import MyTable from './modules/table';
import tabPaneList from './modules/tabPaneList';
export default {
	name: 'productionTraceability',
	components: { search, MyTable },
	// computed: {
	// 	tabPaneList() {
	// 		return tabPaneList;
	// 	},
	// },
	data() {
		return {
			searchParams: {},
			progressIndex: 0, //工序
			tableName: 0,
			params: {
				productionProcessesNum: '',
				orderCode: '',
			},
			productiveProcessList: [],
			mainType: [
				{ name: '原材料' },
				{ name: '生产过程' },
				// { name: "成品发货" },
			],
			searchData: [
				{
					title: '销售订单号',
					key: 'saleOrderCode',
				},
				{
					title: '工单号',
					key: 'workCode',
				},
				{
					title: '批次号',
					key: 'batchNumber',
				},
				{
					title: '销售订单行号',
					key: 'saleOrderItem',
				},
			],
			activeIndex: 0,
			dataArr: [],
			tabPaneList: tabPaneList,
		};
	},
	watch: {
		// activeIndex() {
		// 	// this.checkOutSearch();
		// },
		// progressIndex() {
		// 	// this.checkOutSearch();
		// },
		params: {
			handler() {
				this.searchList();
			},
			deep: true,
		},
	},
	mounted() {
		// this.searchList();
	},
	methods: {
		stateClick(item, index) {
			if (index == 1 && this.checkSearchParamsOnlyOne() == false) {
				return;
			}
			this.tableName = 0;
			this.activeIndex = index;
		},
		progressClick(item, index) {
			const { orderCode, productionProcessesNum } = item;
			this.tableName = 0;
			this.progressIndex = index;
			this.productionProcessesNum = productionProcessesNum;
			this.$set(this.params, 'productionProcessesNum', productionProcessesNum);
			this.$set(this.params, 'orderCode', orderCode);
		},
		checkSearchParamsOnlyOne() {
			let count = 0;
			let batchNumberItemHave = !!this.searchParams.batchNumber;
			let saleOrderItemHave = !!this.searchParams.saleOrderItem;
			let result = true;
			for (const key in this.searchParams) {
				if (
					this.searchParams[key] !== undefined &&
					this.searchParams[key] !== null &&
					this.searchParams[key] !== '' &&
					key !== 'batchNumber' &&
					key !== 'saleOrderItem'
				) {
					count++;
				}
			}

			if (batchNumberItemHave) {
				if (saleOrderItemHave || count > 0) {
					this.$Message.warning('批次号只能单独查询！');
					result = false;
				}
			} else {
				if (saleOrderItemHave) {
					if (count > 1) {
						this.$Message.warning('销售订单行号存在时，销售订单号和工单号只能输入一个！');
						result = false;
					} else if (count == 0) {
						this.$Message.warning('销售订单行号存在时，销售订单号和工单号必须输入一个！');
						result = false;
					}
				} else {
					if (count > 0) {
						this.$Message.warning('销售订单号和工单号查询时，必须输入销售订单行号！');
						result = false;
					} else {
						this.$Message.warning('请输入搜索条件！');
						result = false;
					}
				}
			}
			return result;
		},
		getSearch(arg) {
			this.searchParams = JSON.parse(JSON.stringify(arg[0]));
			if (!this.checkSearchParamsOnlyOne()) {
				return;
			}
			this.getProductiveProcessList();
			this.pageNum = 1;
			this.checkOutSearch();
		},
		checkOutSearch() {
			this.$nextTick(() => {
				//如果是生产过程 先查工序路径
				if (this.activeIndex !== 1) {
					this.searchList();
				}
			});
		},
		getProductiveProcessList() {
			this.progressIndex = 0;
			this.$refs.MyTable.reset();
			this.axios({
				url: '/dms/productionTraceability/productiveProcessList',
				method: 'get',
				params: {
					...this.searchParams,
				},
			}).then((res) => {
				if (res.code == 200) {
					this.productiveProcessList = res.data || [];
					console.log(this.productiveProcessList);
					// for (let key in res.data) {
					//   const element = res.data[key];
					//   this.productiveProcessList.push({
					//     name: element,
					//     code: key,
					//   });
					// }
					this.params.productionProcessesNum = this.productiveProcessList[0].productionProcessesNum;
					this.params.orderCode = this.productiveProcessList[0].orderCode;
				} else {
					this.$Message.warning(res.msg);
				}
			});
		},
		//查询列表
		searchList() {
			this.$nextTick(() => {
				this.$refs.MyTable.searchList();
			});
		},
	},
};
</script>

<style scoped lang="scss">
.btn—box {
	display: flex;
	flex-direction: column;

	.cycle {
		display: flex;
		flex-direction: row;
		margin: 20px 10%;
		justify-content: space-between;
		text-align: center;
	}
	.btn-line {
		margin: 20px 20px !important;

		.normal {
			height: 50px;
			width: 150px;
			border-radius: 5px !important;
			margin: 0 5px;
		}
	}
	.normal {
		border-radius: 100%;
		height: 200px;
		width: 200px;
		font-size: 20px;

		text-align: center;
		display: flex;
		justify-content: center;
		align-items: center;
		cursor: pointer;
		transition: all 0.5s;
		background-color: #b6b6b8;
		color: white;
	}
	.active {
		background-color: #517be8;
	}
}
</style>
